<template>
  <!-- 二级商品页 -->
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选条件 -->
      <SubFilter />
      <!-- 筛选排序 -->
      <div class="goods-list">
        <!-- 筛选条件 -->
        <SubSort />
        <!-- 筛选排序列表 -->
        <SubList />
      </div>
    </div>
  </div>
</template>

<script>
// 排序列表
import SubList from './components/sub-list.vue'
// 导入排序组件
import SubSort from './components/sub-sort.vue'
// 导入筛选组件
import SubFilter from './components/sub-filter.vue'
// 导入面包屑
import SubBread from './components/SubBread.vue'
// 导入二级api接口
import { findSubCategoryFilter } from '@/api/category.js'
import { ref, onMounted, provide } from 'vue'
// 导入路由获取方法
import { useRoute } from 'vue-router'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    // 定义空数组
    const subCates = ref({})
    // 获取路由方法
    const route = useRoute()
    // 请求数据
    async function getSubCtes () {
      const res = await findSubCategoryFilter(route.params.id)
      /**
       * 需求 : 品牌规格增加全部选项和伟哥选项增加选中状态数据
       */
      // 1.给品牌增加选中状态
      res.data.result.brands.forEach(item => {
        item.selected = false
      })
      // 1.给品牌增加全部选项
      res.data.result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })
      // 规格
      res.data.result.saleProperties.forEach(item => {
        // 2.给规格增加选中状态
        item.properties.forEach((item) => {
          item.selected = false
        })
        // 2.给规格加全部选项.
        item.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })

      // 为数组赋值
      subCates.value = res.data.result
      console.log(res.data.result, '二级目录')
    }
    // 提供二级分类数据给子组件
    provide('subCates', subCates)

    // 筛选条件数据
    const filterParams = ref({
      attrs: [], // 一般商品属性 => {groupName: "规格", propertyName: "CPE加厚手套-100只/盒"}
      sortField: null, // 排序 => // publishTime(最新), orderNum(人气), price(价格), evaluateNum(评论)
      brandId: null // 品牌ID => '1'
    })
    // 提供过滤条件数据
    provide('filterParams', filterParams)

    onMounted(() => {
      getSubCtes()
    })
    return { subCates }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
<style scoped>
/*
vuex 存储的数据,为什么所有页面js都可以回去? =>vuex中的数据state存储到内存,不会随着页面切换被刷新掉
组件中定义的v2(daya),v3(ref,reactive)的数据,随用随创建
列表过滤实现
方案 :
顶层数据 => 子组件 v2:通过使用父传子 事件中心 eventbus , v3:依赖注入 porvide inject
*/
</style>
